/* screen - contact */

.contact {
  align-items: center;
  background-color: var(--cod-gray);
  display: flex;
  flex-direction: column;
  height: 1925px;
  width: 1920px;
}

.contact .frame-1171278823 {
  background-color: var(--cod-gray);
  filter: blur(10px);
  height: 1080px;
  opacity: 0.3;
  width: 1920px;
  z-index: 2;
}

.contact .frame-1171278823.animate-enter3 {
  animation: animate-enter3-frames 1.40s ease-in-out 0.00s 1 normal forwards;
  filter: blur(10px);
  opacity: 0.3;
}

@keyframes animate-enter3-frames {
  from{opacity: 0.3;
filter: blur(10px);
}
to{opacity: 1;
filter: none;
}
}

.contact .overlap-group1 {
  height: 1080px;
  position: relative;
}

.contact .x2-1 {
  height: 1080px;
  left: 0;
  opacity: 0.2;
  position: absolute;
  top: 0;
  width: 1920px;
}

.contact .place {
  color: var(--white);
  font-family: var(--font-family-telegraf-regular);
  font-size: 61px;
  font-weight: 400;
  left: 852px;
  letter-spacing: -2.44px;
  top: 306px;
}

.contact .frame-1171278720 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 265px;
  left: 702px;
  opacity: 0.3;
  overflow: hidden;
  position: absolute;
  top: 528px;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 238px;
}

.contact .frame-1171278720.animate-enter {
  animation: animate-enter-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.contact .frame-1171278720:hover {
  background-color: #464646
}

.contact .instagram {
  color: #898989;
  font-family: var(--font-family-telegraf-regular);
  font-size: var(--font-size-m);
  font-weight: 400;
  left: 73px;
  line-height: normal;
  top: 210px;
  white-space: nowrap;
}

.contact .jyori__ {
  color: var(--white);
  font-family: var(--font-family-telegraf-regular);
  font-size: 24px;
  font-weight: 400;
  left: 85px;
  letter-spacing: -0.96px;
  line-height: normal;
  position: absolute;
  top: 175px;
  white-space: nowrap;
}

.contact .image {
  height: 120px;
  left: 59px;
  object-fit: cover;
  position: absolute;
  top: 33px;
  width: 120px;
}

.contact .frame-1171278721 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 265px;
  left: 979px;
  opacity: 0.3;
  overflow: hidden;
  position: absolute;
  top: 528px;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 238px;
}

.contact .frame-1171278721.animate-enter1 {
  animation: animate-enter1-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter1-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.contact .frame-1171278721:hover {
  background-color: #464646
}

.contact .email {
  color: #898989;
  cursor: pointer;
  font-family: var(--font-family-telegraf-regular);
  font-size: var(--font-size-m);
  font-weight: 400;
  left: 95px;
  letter-spacing: -0.80px;
  line-height: normal;
  position: absolute;
  text-decoration: underline;
  top: 210px;
  white-space: nowrap;
}

.contact .psward7733gmailcom {
  color: var(--white);
  font-family: var(--font-family-telegraf-regular);
  font-size: var(--font-size-xs);
  font-weight: 400;
  left: 27px;
  letter-spacing: -0.68px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 183px;
  white-space: nowrap;
}

.contact .frame-1171278731 {
  background-color: var(--shark-3);
  border-radius: 55px;
  cursor: pointer;
  filter: blur(10px);
  height: 49px;
  left: 902px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 241px;
  transition: all 0.4s ease;
  width: 117px;
}

.contact .frame-1171278731.animate-enter2 {
  animation: animate-enter2-frames 0.40s ease-in-out 0.00s 1 normal forwards;
  filter: blur(10px);
  opacity: 0;
}

@keyframes animate-enter2-frames {
  from{opacity: 0;
filter: blur(10px);
}
to{opacity: 1;
filter: none;
}
}

.contact .frame-1171278731:hover {
  transform: scale(1.1);
}

.contact .text-4 {
  color: var(--cyan--aqua);
  font-family: var(--font-family-pretendard-semibold);
  font-size: var(--font-size-m);
  font-weight: 600;
  left: 33px;
  letter-spacing: -0.40px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 11px;
  white-space: nowrap;
}

.contact .text-5 {
  color: var(--cyan--aqua);
  font-family: var(--font-family-pretendard-regular);
  font-size: var(--font-size-xs);
  font-weight: 400;
  left: 825px;
  letter-spacing: -0.68px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 388px;
}

.contact .frame-19 {
  -webkit-backdrop-filter: blur(60px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(60px) brightness(100%);
  background-color: var(--black-2);
  border-radius: 23px;
  display: flex;
  gap: 915px;
  height: 70px;
  left: 40px;
  min-width: 1840px;
  padding: 11px 36px;
  position: fixed;
  top: 17px;
  z-index: 3;
}

.contact .group-1171278889:hover {
  filter: blur(5px);
}

.contact .group-1 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 6px;
  min-width: 100px;
  transition: all 0.5s ease;
}

.contact .group-1:hover {
  transform: scale(1.1);
}

.contact .frame-1171278180 {
  background-color: var(--granite-gray-2);
  border-radius: 42px;
  cursor: pointer;
  height: 46px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 107px;
}

.contact .frame-1171278180:hover {
  background-color: #585858
}

.contact .frame-11712781:hover {
  background-color: #383838
}

.contact .about-me {
  left: 18px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.contact .frame-1171278182:hover {
  background-color: #c5c5c5
}

.contact .place-1 {
  left: 24px;
  letter-spacing: -0.50px;
  top: 13px;
}

.contact .frame-1171278732 {
  align-items: flex-start;
  background-color: var(--black);
  border: 1px solid;
  border-color: var(--dove-gray);
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  gap: 1px;
  height: 70px;
  left: 1811px;
  overflow: hidden;
  padding: 24.5px 14.5px;
  position: fixed;
  top: 970px;
  transform: rotate(-90.00deg);
  transition: all 0.2s ease;
  width: 70px;
  z-index: 4;
}

.contact .frame-1171278732:hover {
  background-color: #141414
}

.contact .frame-1171278824 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 402px;
  margin-left: 12.0px;
  margin-top: 356px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 1722px;
  z-index: 1;
}

.contact .frame-1171278824:hover {
  background-color: #3E3E3E
}

.contact .overlap-group {
  height: 1024px;
  left: 348px;
  position: absolute;
  top: -882px;
  width: 1037px;
}

.contact .ellipse-8183 {
  background-color: var(--alto);
  border-radius: 512px;
  filter: blur(284.5px);;
  height: 1024px;
  left: 0;
  opacity: 0.05;
  position: absolute;
  top: 0;
  width: 1024px;
}

.contact .text-3 {
  left: 986px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.contact .ui {
  left: 116px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.contact .uiux {
  left: 349px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.contact .group-1-1 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 6px;
  height: 47px;
  left: 49px;
  min-width: 100px;
  position: absolute;
  top: 227px;
  transition: all 0.5s ease;
}

.contact .group-1-1:hover {
  transform: scale(1.1);
}

.contact .instagram-1 {
  left: 1334px;
  line-height: 32px;
  top: 149px;
  width: 87px;
}

.contact .a24 {
  cursor: pointer;
  left: 464px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 149px;
  width: 87px;
}

.contact .artaloo {
  cursor: pointer;
  left: 697px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 149px;
  width: 87px;
}

.contact .text-1 {
  cursor: pointer;
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  text-decoration: underline;
  top: 210px;
  width: 87px;
}

.contact .epiphone {
  cursor: pointer;
  left: 464px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 210px;
  width: 87px;
}

.contact .text-2 {
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 271px;
  width: 87px;
}

.contact .instagram-2 {
  cursor: pointer;
  letter-spacing: -0.80px;
  position: absolute;
  text-decoration: underline;
}

.contact .place-2 {
  line-height: normal;
  position: absolute;
  text-align: center;
  white-space: nowrap;
}

.contact .tm-2 {
  height: 14px;
  letter-spacing: -0.98px;
  line-height: normal;
  margin-top: 8px;
}